<a href="https://github.com/2fdevs/videogular/edit/master/app/scripts/com/2fdevs/videogular/directives/videogular.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/2fdevs/videogular/blob/6f55d80/app/scripts/com/2fdevs/videogular/directives/videogular.js#L116" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">videogular</code>
<div><span class="hint">directive in module <code ng:non-bindable="">com.2fdevs.videogular</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Main directive that must wrap a &lt;vg-media&gt; tag and all plugins.</p>
<p>&lt;video&gt; tag usually will be above plugin tags, that&#39;s because plugins should be in a layer over the &lt;video&gt;.</p>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage">as element:<pre class="prettyprint linenums">&lt;videogular
       vg-theme="{string}"
       vg-plays-inline="{boolean}"
       vg-clear-media-on-navigate="{boolean}"
       vg-auto-play="{boolean}"
       vg-start-time="{boolean}"
       vg-virtual-clip-duration="{boolean}"
       vg-cue-points="{object}"
       vg-config="{function}"
       vg-can-play="{function}"
       vg-complete="{function}"
       vg-update-volume="{function}"
       vg-update-playback="{function}"
       vg-update-time="{function}"
       vg-update-state="{function}"
       vg-player-ready="{function}"
       vg-change-source="{function}"
       vg-plays-inline="{function}"
       vg-native-fullscreen="{function}"
       vg-seeking="{function}"
       vg-seeked="{function}"
       vg-error="{function}"&gt;
&lt;/videogular&gt;</pre>
<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>vgTheme</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>String with a scope name variable. This directive will inject a CSS link in the header of your page.
<strong>This parameter is required.</strong></p>
</div></td></tr><tr><td>vgPlaysInline</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>vgPlaysInline Boolean value or a String with a scope name variable to use native fullscreen (default) or set fullscreen inside browser (true).</p>
</div> <p><em>(default: false)</em></p></td></tr><tr><td>vgClearMediaOnNavigate</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>vgClearMediaOnNavigate Boolean value or a String with a scope name variable to reset the video player when user navigates.</p>
<p>This is useful to allow continuous playback between different routes.</p>
</div> <p><em>(default: true)</em></p></td></tr><tr><td>vgAutoPlay</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>vgAutoPlay Boolean value or a String with a scope name variable to auto start playing video when it is initialized.</p>
<p><strong>This parameter is disabled in mobile devices</strong> because user must click on content to prevent consuming mobile data plans.</p>
</div> <p><em>(default: false)</em></p></td></tr><tr><td>vgStartTime</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>vgStartTime Number value or a String with a scope name variable to start playing the video at a certain time.</p>
</div> <p><em>(default: -1)</em></p></td></tr><tr><td>vgVirtualClipDuration</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>vgVirtualClipDuration Number value or a String with a scope name variable for a length to limit the video playback to.</p>
</div> <p><em>(default: -1)</em></p></td></tr><tr><td>vgCuePoints</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Bindable object containing a list of timelines with cue points objects. A timeline is an array of objects with the following properties:</p>
<ul>
<li><code>timeLapse</code> is an object with two properties <code>start</code> and <code>end</code> representing in seconds the period for this cue points.</li>
<li><code>onEnter</code> callback called when user enters on a cue point. callback(currentTime, timeLapse, params)</li>
<li><code>onLeave</code> callback called when user seeks backwards and leave the current cue point or a completed cue point. callback(currentTime, timeLapse, params)</li>
<li><code>onUpdate</code> callback called when the current time is between timeLapse.start and timeLapse.end. callback(currentTime, timeLapse, params)</li>
<li><code>onComplete</code> callback called when the user seek forward or the current time passes timeLapse.end property. callback(currentTime, timeLapse, params)</li>
<li><code>params</code> an object with values available to receive in the callback..</li>
</ul>
</div></td></tr><tr><td>vgConfig</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>String with a url to a config file. Config file&#39;s must be a JSON file object with the following structure:
<pre class="prettyprint linenums">
 {
   "controls": false,
   "loop": false,
   "autoplay": false,
   "startTime": -1,
   "virtualClipDuration": -1,
   "preload": "auto",
   "theme": "path/to/videogular.css",
   "sources": [
     {
       "src": "path/to/videogular.mp4",
       "type": "video/mp4"
     },
     {
       "src": "path/to/videogular.webm",
       "type": "video/webm"
     },
     {
       "src": "path/to/videogular.ogg",
       "type": "video/ogg"
     }
   ],
   "tracks": [
     {
       "src": "path/to/pale-blue-dot.vtt",
       "kind": "subtitles",
       "srclang": "en",
       "label": "English",
       "default": ""
     }
   ],
   "plugins": {
     "controls": {
       "autohide": true,
       "autohideTime": 3000
     },
     "poster": {
       "url": "path/to/earth.png"
     },
     "ima-ads": {
       "companion": "companionAd",
       "companionSize": [728, 90],
       "network": "6062",
       "unitPath": "iab_vast_samples",
       "adTagUrl": "http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=%2F3510761%2FadRulesSampleTags&ciu_szs=160x600%2C300x250%2C728x90&cust_params=adrule%3Dpremidpostpodandbumpers&impl=s&gdfp_req=1&env=vp&ad_rule=1&vid=47570401&cmsid=481&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]",
       "skipButton": "&lt;div class='skipButton'&gt;skip ad&lt;/div&gt;"
     },
     "analytics": {
       "category": "Videogular",
       "label": "Main",
       "events": {
         "ready": true,
         "play": true,
         "pause": true,
         "stop": true,
         "complete": true,
         "progress": 10
       }
     }
   }
 }
</pre>
</div></td></tr><tr><td>vgCanPlay</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when video is able to begin playback</p>
</div></td></tr><tr><td>vgComplete</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when video have been completed.</p>
</div></td></tr><tr><td>vgUpdateVolume</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when volume changes. Receives a param with the new volume.</p>
</div></td></tr><tr><td>vgUpdatePlayback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when playback changes. Receives a param with the new playback rate.</p>
</div></td></tr><tr><td>vgUpdateTime</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when video playback time is updated. Receives two params with current time and duration in milliseconds.</p>
</div></td></tr><tr><td>vgUpdateState</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when video state changes. Receives a param with the new state. Possible values are &quot;play&quot;, &quot;stop&quot; or &quot;pause&quot;.</p>
</div></td></tr><tr><td>vgPlayerReady</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when video have been initialized. Receives a param with the videogular API.</p>
</div></td></tr><tr><td>vgChangeSource</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to change current video source. Receives a param with the new video.</p>
</div></td></tr><tr><td>vgPlaysInline</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Boolean to play video inline. Generally used in mobile devices.</p>
</div></td></tr><tr><td>vgNativeFullscreen</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Boolean to disable native fullscreen.</p>
</div></td></tr><tr><td>vgSeeking</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when the video has finished jumping to a new time. Receives a param with the seeked time and duration in seconds.</p>
</div></td></tr><tr><td>vgSeeked</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to call when the video is jumping to a new time. Receives two params with the seeked time and duration in seconds.</p>
</div></td></tr><tr><td>vgError</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="com-2fdevs-videogular-directive-page com-2fdevs-videogular-directive-videogular-page"><p>Function name in controller&#39;s scope to receive an error from video object. Receives a param with the error event.
This is a free parameter and it could be values like &quot;new.mp4&quot;, &quot;320&quot; or &quot;sd&quot;. This will allow you to use this to change a video or video quality.
This callback will not change the video, you should do that by updating your sources scope variable.</p>
</div></td></tr></tbody></table></div>
</div>
